import styles from './index.less';
import { useState, useRef, useEffect } from 'react';
import ReactQuill, { Quill } from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import './quill-size-fix.css';
import './quill-lineheight.css';
import './quill-editor.css';

// 注册字号
const SizeClass = Quill.import('attributors/class/size');
SizeClass.whitelist = [
  '12px', '14px', '16px', '18px', '20px', '24px', '28px', '32px', '36px'
];
Quill.register(SizeClass, true);

// 注册行高配置
const Parchment = Quill.import('parchment');
const lineHeightArr = ['10', '12', '15', '18', '20', '25', '30'];
let lineHeightConfig = {
    scope: Parchment.Scope.BLOCK,
    whitelist: lineHeightArr
};
  
const LineHeightClass = new Parchment.Attributor.Class(
    'lineheight',
    'ql-lineheight',
    lineHeightConfig
);
  
  Quill.register(LineHeightClass, true);

export default () => {
    const reactQuillRef = useRef<ReactQuill>(null);

    const [value, setValue] = useState<string>('<p><br></p>');


    const fakeUrl = 'https://zp-zhouxuan.oss-cn-hangzhou.aliyuncs.com/sirius/banner_saas.png';

    /* 挂载完成后动态注册 handler */
    useEffect(() => {
        const quill = reactQuillRef.current?.getEditor();
        if (!quill) return;

        // 拿到 toolbar 模块
        const toolbar = quill.getModule('toolbar');
        // 把 image 按钮的 handler 换成我们的
        toolbar.addHandler('image', imageHandler);
    }, []);

    const imageHandler = function (this: any) {
        const quill = (this as any).quill as Quill;
        const range = quill.getSelection(true); // ① 立即取光标
        const index = range ? range.index : quill.getLength();
        const input = document.createElement("input");
        input.type = "file";
        input.accept = "image/*";

        // ② 在用户点击的同步阶段就把“占位图”插进去（保证有合法索引）
        const placeholder = fakeUrl;
        quill.insertEmbed(index, "image", placeholder);
        quill.setSelection(index + 1, 0); // 光标放图后

        // ③ 选文件 + 异步换图
        input.onchange = () => {
            const file = input.files?.[0];
            if (!file) {
                // 用户取消 → 删掉占位
                quill.deleteText(index, 1);
                return;
            }
            // 用假地址代替上传（你后面换成真实接口即可）
            const url = fakeUrl;
            quill.deleteText(index, 1); // 删占位
            quill.insertEmbed(index, "image", url);
            quill.setSelection(index + 1, 0); // 光标归位
        };

        input.click(); // 立刻弹出文件选择框
    };

    const modules = {
        toolbar: {
            container: [
                [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
                [{ font: [] }], // 字体
                [{ size: SizeClass.whitelist }], // 字号
                [{ lineheight: lineHeightArr }], // 行间距
                [
                    { color: [] }, // 文字颜色
                    { background: [] }, // 背景色
                ],
                [
                    "bold", // 加粗
                    "italic", // 斜体
                    "underline", // 下划线
                    "strike", // 删除线
                    "blockquote", // 引用
                    "code-block", // 代码块
                ],
                [{ script: "sub" }, { script: "super" }], // superscript（x2）/subscript
                [{ align: [] }], // 对齐方式
                [{ indent: "-1" }, { indent: "+1" }],
                [
                    "link", // 链接
                    "image", // 图片
                    "video", // 视频
                    // "formula", // 数学函数
                ],
                [
                    { list: "ordered" }, // 有序列表
                    { list: "bullet" }, // 无序列表
                    { list: "check" }, // 选中列表
                ],
                ["clean"], // 清除按钮
            ],
            // handlers: {
            //     image: imageHandler,
            // },
        },
    };

    return (
        <div className={styles.container}>
            <ReactQuill
                ref={reactQuillRef}
                theme="snow"
                value={value}
                modules={modules}
                formats={[
                    'size', 'bold', 'italic', 'underline', 'list', 
                    'bullet', 'lineheight', 'header', 'font', 'color', 
                    'background', 'strike', 'blockquote', 'code-block', 
                    'script', 'align', 'indent', 'image', 'video',
                ]}
                onChange={(value: string) => {
                    console.log(`## value=${value}`);
                    // 1、图片默认转base64，正则找出来，传到服务器，生成url再替换掉base64
                    
                    // 2、
                    setValue(value);
                }}
                onFocus={() => {

                }}
                onBlur={() => {

                }}
                onChangeSelection={() => {

                }}
                
            />
        </div>
    );
}

// 把Quill的图片base信息转成File，不一定需要，看业务需求
function base64toFile(base64String: string): File {
    // 去掉 base64 字符串的前缀（如 "data:image/png;base64,"）
    const base64Data = base64String.replace(/^data:image\/\w+;base64,/, "");
    // 将 base64 字符串解码为二进制数据
    const byteCharacters = atob(base64Data);
    // 将二进制数据转换为字节数组
    const byteNumbers = new Array(byteCharacters.length);
    for (let i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i);
    }
    // 创建一个 Uint8Array
    const uint8Array = new Uint8Array(byteNumbers);
    // 创建 Blob 对象
    const blob = new Blob([uint8Array], { type: "image/png" });
    // 生成唯一的文件名
    const filename = `image_${Date.now()}.png`;
    // 创建 File 对象
    const file = new File([blob], filename, { type: "image/png" });
    return file;
}

// 图片文件上传到服务器，替换富文本编辑器中的内容
const handleEditorChange = (ctx: any, delta: any, source: any, editor: any): string => {
    // 图片上传后为base64，上传至服务器文件过大，所以需要将base64格式图片进行转换，具体方法如下：
    let delta_ops = delta.ops;
    // 获取富文本内容
    let quillContent = editor.getContents();
    if (delta_ops && delta_ops.length) {
        quillContent?.ops?.map(async (item: any) => {
            if (item.insert) {
                let imgStr = item.insert.image;
                // 判断是否为图片
                if (imgStr && imgStr?.startsWith("data:image/")) {
                    let file = base64toFile(imgStr);
                    // 调用文件上传接口：将二进制图片文件上传至服务器，服务器返回一个图片地址
                    const url = 'xxx';
                    // 更新为图片地址
                    item.insert.image = url;
                    // 设置新的富文本内容
                    // setContent(quillContent);
                    // 设置表单数据
                    // form.setFieldsValue({ content: quillContent });
                    return url;
                }
            }
        });
    }
    return '';
};